<template>
  <div class="sift-item">
    <div class="sift-item__header">{{ title }}</div>
    <div class="sift-item__body">
      <div
          class="sift-item__item"
          v-for="(item, index) in siftItems"
          :key="index"
          :class="{
          'sift-item__item--check': checkStatus(item),
        }"
          @click="handleClick(item)"
      >
        {{ item.label }}
      </div>
    </div>
  </div>
</template>

<script lang="js">
import {defineComponent} from 'vue';

export default defineComponent({
  name: 'SearchSiftItem',
  emit: ['change'],
  props: {
    prop: String,
    title: String,
    siftItems: Array,
    isMultiple: {
      type: Boolean,
      default: false,
    }
  },
  data() {
    return {
      siftRes: {}
    };
  },
  created() {
    this.initSiftRes();
  },
  methods: {
    initSiftRes() {
      this.siftRes = {
        key: this.prop,
        res: ''
      };
    },
    checkStatus(data) {
      const siftCheck = this.siftRes.res;
      if (typeof siftCheck !== 'string' && this.isMultiple) {
        return siftCheck.find((s) => s === data.value);
      }

      return siftCheck === data.value;
    },
    handleClick(data) {
      // 多选
      if (this.isMultiple) {
        this.multipleChoice(data);
        return;
      }

      // 单选
      this.singleChoice(data);
    },
    multipleChoice(data) {
      let siftCheck = this.siftRes.res;
      if (typeof siftCheck === 'string') {
        siftCheck = [];
      }

      const find = siftCheck.find((item) => item === data.value);

      // 取消选中
      if (find) {
        this.siftRes.res = siftCheck.filter(
            (item) => item !== data.value
        );
        this.$emit('change', this.siftRes);
        return;
      }

      // 选中
      siftCheck.push(data.value);
      this.siftRes.res = siftCheck;
      this.$emit('change', this.siftRes);
    },
    singleChoice(data) {
      const siftCheck = this.siftRes.res;

      const find = siftCheck === data.value;

      // 取消选中
      if (find) {
        this.siftRes.res = '';
        this.$emit('change', this.siftRes);
        return;
      }

      // 选中
      this.siftRes.res = data.value;
      this.$emit('change', this.siftRes);
    },
    clearAllChoice() {
      if (this.isMultiple) {
        this.siftRes.res = [];
      } else {
        this.siftRes.res = '';
      }

      return this.siftRes;
    }
  }
});
</script>

<style scoped lang="scss">
.sift-item {
  display: flex;
  flex-direction: column;
  row-gap: 10px;

  &__header {
    font-size: 14px;
    line-height: 20px;
    font-weight: bold;
    color: #333;
  }

  &__body {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }

  &__item {
    padding: 4px 12px;
    border-radius: 4px;
    border: 1px solid #e5e5e5;
    background: #f4f4f4;
    font-size: 12px;
    line-height: normal;
    font-weight: bold;

    &--check {
      color: #409eff;
      border: 1px solid #409eff;
      background: rgb(45, 90, 250, 0.05);
    }
  }
}
</style>
